<template>
	<view class="container">
		<u-navbar placeholder leftIconColor="#fff" bgColor="transparent" title="设置操作密码" :autoBack="true"></u-navbar>

		<view class="pad-32">
			<u--form labelPosition="left" :model="userInfo" ref="form1" labelWidth="160rpx"
				:labelStyle="{color: '#fff',marginBottom:'30rpx'}">
				<view class="bg-theme1 pad-left-right-24 pad-top-bottom-16 radius24">
					<u-form-item label="手机号码" prop="tel" :borderBottom="true">
						<u--input color="#fff" disabled type="text" clearable placeholderClass="input-style" placeholder="请输入手机号"
							v-model="info.tel" border="none"></u--input>
					</u-form-item>
					<u-form-item label="验证码" :borderBottom="true">
						<u-input color="#fff" clearable placeholderClass="input-style" placeholder="请输入验证码"
							v-model="userInfo.sms_code" border="none">
							<template slot="suffix">
								<text v-if="codeTime == 60" @click="$u.debounce(hanldePostCode, 500)"
									class="font-24 color-theme">获取验证码</text>
								<text v-else class="font-24 color-theme">{{codeText}}</text>
							</template>
						</u-input>
					</u-form-item>
					<view class="centerXY columnY pad-top-bottom-50">
						<view class="font-28 color-grey pad-bottom-48">输入操作密码</view>
						<u-code-input color="#FFFFFF" :dot="dot" @finish="hanldeFinish" :maxlength="6"></u-code-input>
						<text @click="hanldeDot" class="font-28 color-theme mar-top-30">查看密码</text>
					</view>
				</view>
			</u--form>
			<u-button :customStyle="{borderRadius: '50rpx',border: 0,}" class="mar-top-96 font-32 button bg-theme"
				@click="submit">保存</u-button>
		</view>
	</view>
</template>

<script>
	// 接口地址
	import {
		checkPwdIsset,
		baseInfo,
		sendSelf,
		updateActSecret
	} from '@/config/api.js'

	export default {
		data() {
			return {
				// 提交数据
				userInfo: {},
				// 用户信息
				info: {},
				// 查看密码
				dot: true,
				// 倒计时秒
				codeTime: 60,
				// 定时器
				inter: null
			}
		},
		onLoad() {
			this.getBaseInfo();
		},
		methods: {
			// 获取操作密码
			hanldeFinish(e) {
				this.userInfo.act_secret = e;
			},
			// 提交数据
			submit() {
				updateActSecret(this.userInfo).then(res => {
					uni.$u.toast(res.msg);

					setTimeout(() => {
						uni.navigateBack();
					}, 1000)
				})
			},
			// 获取用户信息
			getBaseInfo() {
				baseInfo().then(res => {
					this.info = res.data.info;
				})
			},
			// 获取验证码
			hanldePostCode() {
				uni.showLoading({
					title: '发送中...'
				})
				sendSelf({
					scene: 'update_act_secret'
				}).then(res => {
					uni.hideLoading();
					uni.$u.toast(res.msg);
					clearInterval(this.inter);
					this.inter = setInterval(() => {
						this.codeTime -= 1
						this.codeText = `${this.codeTime}秒重新获取`;
						// 倒计时完成
						if (this.codeTime <= 0) {
							this.codeTime = `获取验证码`;
							this.codeTime = 60;
							clearInterval(this.inter);
						}
					}, 1000);
				})
			},
			// 查看密码
			hanldeDot() {
				this.dot = !this.dot;
			}
		}
	}
</script>

<style scoped lang="scss">
	.container {
		min-height: 100vmax;

		::v-deep .u-navbar__content {
			background-image: url('../../static/image/my-bg.png');
			background-size: cover;
			background-repeat: no-repeat;
			background-color: #f5f5f5;
		}
		
		::v-deep .u-input {
			background-color: transparent !important;
		}

		::v-deep .uni-input-input:disabled {
			background-color: transparent;
		}

		::v-deep .u-form-item__body {
			height: 100rpx;
		}

		.button {
			box-shadow: 0 10px 15px rgba(223, 0, 7, .1);
			height: 96rpx;
			color: white;
		}
	}
</style>